import { PureComponent } from 'react'
import { connect } from 'dva'
import { Input, Button, Tabs, Radio, Select, DatePicker } from 'antd'
import styles from './sonData.less'
import SingleTable from 'components/table/index'
const { TabPane } = Tabs
const { Option } = Select
@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  commonList: example.commonList,   //读取原有的state，即models中的global.js文件中的weather
  userList: example.userList,
  totalCount: example.total,
  oderList: example.oderList,
  oderTotal: example.oderTotal,
  loading: loading.effects['example/getCommonListData'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class SonData extends PureComponent {
  state = { size: '1' }
  onChange = (e) => {
    this.setState({ size: e.target.value });
  }
  render() {
    const columns = [
      {
          key: 'gmtCreate',
          title: '转运单号',
          dataIndex: 'gmtCreate',
          align: 'center',
      },
      {
          key: 'operationTypeName',
          title: '子运单编号',
          dataIndex: 'operationTypeName',
          align: 'center',
      },
      {
          key: 'creatorName',
          title: '包号',
          dataIndex: 'creatorName',
          align: 'center',
      },
      {
          key: '4',
          title: '舱单号',
          dataIndex: 'creatorName',
          align: 'center',
      },
      {
        key: '5',
        title: '创建时间',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '6',
        title: '物流状态',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '7',
        title: '实际重量(KG)',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '8',
        title: '路径',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '9',
        title: '货架编号',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '10',
        title: '仓库名称',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '11',
        title: 'KiKUU订单号',
        dataIndex: 'creatorName',
        align: 'center',
      }
    ]
    const dataList = []
    const { size } = this.state
   
    return (
      <div className={styles.sonData}>
        <div className={styles.sonDataBox}>
          <div className={styles.sonDataTitle}>
            <h2>子运单数据</h2>
            <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }} className={styles.radioStyle}>
              <Radio.Button value="1">精确查询</Radio.Button>
              <Radio.Button value="2">模糊查询</Radio.Button>
            </Radio.Group>
          </div>
          <div className={styles.tabBox}>
            <Tabs activeKey={size} defaultActiveKey="1" >
                <TabPane tab=" " key="1">
                  <div className={styles.sonDataSearch}>
                    <div className={styles.sonDataSearchSin}>
                      <span className={styles.sonDataSpan}>IAE运单号：</span>
                      <Input className={styles.sonDataInput} />
                    </div>
                    <div className={styles.sonDataSearchSin} style={{marginLeft: '48px'}}>
                      <span className={styles.sonDataSpan}>子运单号：</span>
                      <Input className={styles.sonDataInput}/>
                    </div>
                  </div>
                </TabPane>
                <TabPane tab=" " key="2">
                <div className={styles.sonDataSearch}>
                  <div className={styles.sonDataSearchSin} >
                    <span className={styles.sonDataSpan} >始发港：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >中转站：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >目的港：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >包号：</span>
                    <Input className={styles.sonDataInput} />
                  </div>
                </div>
                <div className={styles.sonDataSearch}>
                  <div className={styles.sonDataSearchSin} >
                    <span className={styles.sonDataSpan} >舱单号：</span>
                    <Input className={styles.sonDataInput} />
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >KiKUU订单号：</span>
                    <Input className={styles.sonDataInput} />
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >货架编号：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >物流状态：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                </div>
                <div className={styles.sonDataSearch}>
                  <div className={styles.sonDataSearchSin} >
                    <span className={styles.sonDataSpan} >子单类型：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >是否异常：</span>
                    <Select defaultValue="lucy" className={styles.sonDataInput} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >开始日期：</span>
                    <DatePicker className={styles.sonDataInput} />
                  </div>
                  <div className={styles.sonDataSearchSin} style={{marginLeft: '28px'}}>
                    <span className={styles.sonDataSpan} >结束日期：</span>
                    <DatePicker className={styles.sonDataInput} />
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>

          
          <Button type="primary" style={{margin: '0 0 24px 24px'}}>查询</Button>
          <div className={styles.sonDataTable}>
            <SingleTable
              data={{ list: dataList }}
              columns={columns}
                
            />
          </div>
        </div>
      </div>
    )
  }
}
